<template>
  <v-form-render style="width: 100%; height: 100%;min-height: 80px; background-color: #fff; "
                    :scheme="scheme"></v-form-render>
</template>

<script lang="ts" setup>
import {onMounted, ref, watch} from "vue";
import {getCurrentInstance} from 'vue';
//import NestedDragItem from "@/components/form/designer/NestedDragItem.vue"
import VFormRender  from "@/components/form/designer/VFormRender.vue"
import {
  setRowDataKey
} from "@/config/app.keys";
import eventBus from '@/event/eventBus';
interface Props {
  params?:object;
}

const props = defineProps<Props>()
const {proxy} = getCurrentInstance();
interface Emits {
  (e: 'update:value', v: string): void
}


const emits = defineEmits<Emits>()
const scheme = ref({});

onMounted(()=>{
  //debugger;
  let row = props.params.data;
  console.log('wrap col row value:',JSON.stringify(row))
})

/**
 * 推送行数据给相关组件
 * @param componentList
 */
function pushRowData(componentList: any[]) {
  let rowData = props.params.data;
  console.log('rowData:'+JSON.stringify(rowData))
  for (let i =  componentList.length-1;i>=0 ;i--) {
    let componentId = componentList[i].id;
    //先检查是否注册事件，发送消息，通知组件类型为按钮+form-item组件更新数据
    if(eventBus.$exist(componentId+ "_" + setRowDataKey)) {
      eventBus.$emit(componentId + "_" + setRowDataKey, rowData);
      // componentList.splice(i,1);
    }
  }
  if(componentList.length==0){
    clearInterval(timer)
  }
}
let timer=null;
watch(() => props.params, (newVal) =>{
   //获取列定义
  let colDef = props.params.colDef;
  console.log('colDef:'+JSON.stringify(colDef))
  // 获取列定义中的某些属性，例如标题和字段名
  let cellRendererParams = colDef.cellRendererParams;
  console.log('cellRendererParams',cellRendererParams)
  if(cellRendererParams){
    scheme.value.children = JSON.parse(cellRendererParams);
    //获取form-item组件及按钮
    // let componentList = buildComponList(scheme.value);
    // //每隔2秒执行一次，componentList为空时，关闭定时器
    // timer = setInterval(() => {
    //   pushRowData(componentList);
    // }, 2000);
    //然后循环推送行数据

  }
},{immediate: true,deep: true})

/**
 * 获取组件列表：目前只查按钮及form-item组件
 * @param schema
 * @param parentName
 */
function buildComponList(schema:Object):any[] {
  //搜索所有下级：非布局，展示，按钮组件
  let i=0;
  let returnData=[];

  let childrens=[];
  if(schema.children){
    childrens = schema.children;
  }
  //遍历所有子节点
  for(i=0;i<childrens.length;i++){
    if(childrens[i].category =='button' || childrens[i].category=='form-item'){
        returnData.push({
          id: childrens[i].id,
        })

    }else{
      let childReturnData = buildComponList(childrens[i]);

      if(childReturnData.length>0){
        //合并一个数组
        returnData.push(...childReturnData)
      }

    }
  }
  return returnData;
}

watch(()=>scheme,(newVal)=>{
  //console.log('enter children watch',JSON.stringify(newVal))
  //获取列定义
  let colDef = props.params.colDef;
  //
  // // 获取列定义中的某些属性，例如标题和字段名
  // 获取所有列的定义
  const allColumns = props.params.columnApi.api.columnModel.columnDefs;
  // if(props.params.columnApi){
  //   console.log('column size:'+props.params.columnApi.api.columnModel.columnDefs.length)
  // }else{
  //   console.log('props.params.columnApi is not object')
  // }
  // 打印列定义到控制台
  allColumns.forEach(column => {
    if(column.field===colDef.field){
      column.cellRendererParams=JSON.stringify(scheme.value.children);
    }
  });
  //console.log('cellRendererParams',colDef.cellRendererParams)
},{immediate: true,deep: true})
</script>

<style scoped>

</style>
